<template>
  <bg v-if="showScan">
    <Scanner v-if="showScan" @scan="scan"></Scanner>
  </bg>
  <bg v-else-if="type=='search'">
    <!-- {{scanText}} -->
    <div class="btn btn-camera"  @click="startScan()">
       SCAN QR
    </div>
  </bg>
  
  <bg v-else-if="type=='checkin'">
   
    <div class="user-info">
          
    </div>
    <!-- {{scanText}} -->
    <div @click="goHome" class="btn btn-home"  >
       HOME
    </div>
      
  </bg>
    
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import Scanner from './scanner.vue'
  import bg from './bg.vue'
  import { checkIn} from '../api';

  const ScannerRef = Scanner;
  const showScan = ref(false);
  const scanText = ref('');
  const total = ref(0);
  const current = ref(0);
  const keywords = ref('');
  const users = ref([]);
  const type = ref('search');
  const currentUser = ref({});
  
  const search = async (callback=null)=>{
    
    if(!keywords.value)
      return ;
    
    users.value = (await searchUser({
      keyword:keywords.value
    })).data||[];
    
    currentUser.value = {};
    callback && callback();
  }
  
  const goHome = ()=>{
    type.value = 'search';
    showScan.value = false;
    search();
  }
  const checkin = async ()=>{
    
    if(!currentUser.value.uuid){
      return alert('请选择一个用户');
    }
    
    let result = await checkUser({
      user_uuid:currentUser.value.uuid
    });
    if(result.code == 0){
      currentUser.value.info.is_check = 1;
      updateTotal();
      goHome();
    }else{
      return alert(result.message||'签到失败');
    }
  }
  
  const cancelCheckin = async ()=>{
    
    if(!currentUser.value.uuid){
      return alert('请选择一个用户');
    }
    
    let result = await checkCancel({
      user_uuid:currentUser.value.uuid
    });
    
    if(result.code == 0){
      currentUser.value.info.is_check = 0;
      updateTotal();
      goHome();
    }else{
      return alert(result.message||'取消签到失败');
    }
  }
  
  
  const selectUser = (res)=>{
    type.value = 'checkin';
    currentUser.value = res;
  }
  
  const startScan = ()=>{
    showScan.value = true;
    // scan('D9ML');
  }
  
  const scan = async (text)=>{
    showScan.value = false;
    scanText.value = text;
    let result = await checkInfo({
      qr_content:text
    });
    
    if(result.code != 0 ){
      return alert(result.message||'无效二维码');
    }else{
      selectUser(result.data);
    }
  }
  
  const updateTotal = ()=>{
    activityInfo().then(res=>{
      total.value = res.data.all_count;
      current.value = res.data.check_count;
    })
  }
  onMounted(()=>{
   
  });
  
  
  defineProps({
   
  })

 
</script>

<style scoped lang="scss">
  .status{
    margin-top: 100px;
    font-size: 20px;
    color: rgba(142, 45, 56, 1);
  }
  .input-group{
    width: 1200px;
    height: 120px;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffff;
    border: 1px solid #000;
    border-radius: 40px;
    margin-top: 90px;
    overflow: hidden;
    input{
      width: 92%;
      height: 120px;
      line-height: 120px;
      background: #ffff;
      border:none;
      color: #000;
      text-align: center;
      font-size: 14px;
    }
    
    input:focus {
      outline: none;
    }
  }
  .user-info{
    color: #000;
    width: 1600px;
    height: 2000px;
    margin-top: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
    font-size: 18px;
    .info{
      width: 100%;
      text-align: center;
      white-space: nowrap; /* 保持文本在一行显示 */
      overflow: hidden; /* 隐藏超出容器的文本 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
    .user-name{
      
    }
   
    .user-category{
      margin-top: 100px;
    }
    .user-area{
      margin-top: 160px;
    }
  }
  .user-list{
    width: 1600px;
    height: 2000px;
    margin-top: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: scroll;
    // background: red;
    .user-item{
      width: 80%;
      height: 160px;
      line-height: 160px;
      text-align: center;
      border: 1px solid transparent;
      border-radius: 60px;
      color: #000;
      &.active{
        border: 1px solid rgb(142, 45, 56);
        border-radius: 0;
        background: rgb(142, 45, 56);
        color: #ffffff;
      }
      &.is_check{
      color: #999999;
    }
    }
  }
  
  .btn{
    width: 900px;
    height: 160px;
    line-height: 160px;
    border: 1px solid #000;
    border-radius: 60px;
    color: #000;
    text-align: center;
  }
  
  .btn-camera{
    margin-top: 160px;
  }
  .btn-home{
    margin-top: 120px;
  }
  .btn-checkin{
    margin-top: 80px;
  }
  .none{
    width: 1600px;
    height: 2000px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
  }
</style>
